:root {
    --text-layer-foreground: transparent;
}

.textLayer {
    text-align: initial;
    position: absolute;
    overflow: clip;
    opacity: 1;
    line-height: 1;
    text-size-adjust: none;
    forced-color-adjust: none;
    caret-color: CanvasText;
    z-index: 0;
}

.textLayer.highlighting {
    touch-action: none;
}

.textLayer :is(span,br) {
    color: var(--text-layer-foreground);
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.textLayer  > :not(.markedContent),.textLayer .markedContent span:not(.markedContent) {
    z-index: 1;
}

.textLayer span.markedContent {
    top: 0;
    height: 0;
}

.textLayer span[role="img"] {
    user-select: none;
    cursor: default;
}

.textLayer .highlight {
    --highlight-bg-color: rgb(180 0 170 / 0.25);
    --highlight-selected-bg-color: rgb(0 100 0 / 0.25);
    --highlight-backdrop-filter: none;
    --highlight-selected-backdrop-filter: none;
}

@media screen and (forced-colors: active) {
    .textLayer .highlight {
        --highlight-bg-color: transparent;
        --highlight-selected-bg-color: transparent;
        --highlight-backdrop-filter: var(--hcm-highlight-filter);
        --highlight-selected-backdrop-filter: var(
        --hcm-highlight-selected-filter
        );
    }
}

.textLayer .highlight {
    margin:-1px;
    padding: 1px;
    background-color: var(--highlight-bg-color);
    backdrop-filter: var(--highlight-backdrop-filter);
    border-radius: 4px;
}

.appended:is(.textLayer .highlight) {
    position: initial;
}

.begin:is(.textLayer .highlight) {
    border-radius: 4px 0 0 4px;
}

.end:is(.textLayer .highlight) {
    border-radius: 0 4px 4px 0;
}

.middle:is(.textLayer .highlight) {
    border-radius: 0;
}

.selected:is(.textLayer .highlight) {
    background-color: var(--highlight-selected-bg-color);
    backdrop-filter: var(--highlight-selected-backdrop-filter);
}

.textLayer ::selection {
    background: rgba(0 0 255 / 0.25);
    background: color-mix(in srgb, AccentColor, transparent 75%);
}

.textLayer br::selection {
    background: transparent;
}

.textLayer .endOfContent {
    display: block;
    position: absolute;
    inset: 100% 0 0;
    z-index: 0;
    cursor: default;
    user-select: none;
}

.textLayer.selecting .endOfContent {
    top: 0;
}

.textLayer.selecting ~ .annotationLayer section {
    pointer-events: none;
}
